<template>
  <div class="form-menu-editor">
    <div class="form-menu-editor-content">
      <div class="form-menu-editor-header">业务列表配置</div>
      <div class="form-menu-editor-body" >
        <template v-if="!!menu">
          <SectionTitle>基础设置</SectionTitle>
          <Row :label-width="labelWidth" label="业务列表名称" :inline="true">
            <a-input placeholder="请输入业务列表名称" v-model="menu.menuName"/>
          </Row>
          <Row :label-width="labelWidth" label="业务列表显示项" :inline="true">
            <FieldShowConfig v-model="menu.showFields" :formDefinition="formDefinition"/>
          </Row>
          <Row :label-width="labelWidth" label="排序设置" :inline="true">
            <FieldOrderConfig v-model="menu.orderFields" :formDefinition="formDefinition"/>
          </Row>
          <Row :label-width="labelWidth" label="自定义查询项" :inline="true">
            <FieldShowConfig title="自定义查询项" v-model="menu.searchFields" :formDefinition="formDefinition"/>
          </Row>
          <Row :label-width="labelWidth" label="操作范围" :inline="true">
            <FormMenuSearchQuerys :formDefinition="formDefinition" v-model="menu.searchQuerys"/>
          </Row>
          <Row :label-width="labelWidth" label="备注" :inline="true">
            <a-textarea placeholder="请输入备注" v-model="menu.remark"/>
          </Row>
          <SectionTitle>按钮设置</SectionTitle>
        </template>
        <template v-else>
          <div class="form-menu-editor-body-button-wrapper">
            <LargeButton @click="$emit('addNew')" icon="e666" title="新建业务列表"/>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';
import {createFormDefinition, createFormMenu} from '@/components/hhd/design/FormDesigner/types';
import SectionTitle from '@/components/hhd/design/FormMenu/SectionTitle.vue';
import FieldShowConfig from '@/components/hhd/design/FormMenu/FieldShowConfig.vue';
import FieldOrderConfig from '@/components/hhd/design/FormMenu/FieldOrderConfig.vue';
import FormMenuSearchQuerys from '@/components/hhd/design/FormMenu/FormMenuSearchQuerys.vue';
import LargeButton from '@/components/hhd/design/FormMenu/LargeButton.vue';

export default {
  name: 'FormMenuEditor',
  components: {LargeButton, FormMenuSearchQuerys, FieldOrderConfig, FieldShowConfig, SectionTitle, Row},
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    menu: createProps(Object, () => undefined),
  },
  data() {
    return {
      labelWidth: '150px'
    };
  },
};
</script>
<style>
.form-menu-editor {
  flex: 1;
  height: 100%;
  padding: 10px 10px 10px 0;
}

.form-menu-editor-content {
  border: 1px solid #e2e4e9;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-menu-editor-header {
  border-bottom: 1px solid #e2e4e9;
  padding: 10px 20px;
  background: white;
  height: fit-content;
  font-weight: bold;
}

.form-menu-editor-body {
  background: white;
  padding: 10px;
  height: 100%;
  overflow: auto;
  flex: 1;
}
.form-menu-editor-body-button-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>